<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../static/highcharts/css/highcharts.css">
<!-- 主要文件 -->
<script type="text/javascript" src="../static/highcharts/highcharts.js"></script>
<!-- 导出文件 -->
<script type="text/javascript" src="../static/highcharts/modules/exporting.js"></script>
</head>
<body>
	<div id="container" style="min-width:800px;height:400px"></div>
	<script type="text/javascript">
		window.onload = function() {
			/**
			  * Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表
			 **/
			var chart = new Highcharts.Chart('container', {
				credits: {
					enabled: false // 去除版权信息
				},
			    title: {
			        text: '不同城市的月平均气温',
			        x: -20
			    },
			    subtitle: {
			        text: '数据来源: WorldClimate.com',
			        x: -20
			    },
			    xAxis: {
			        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			    },
			    yAxis: {
			        title: {
			            text: '温度 (°C)'
			        },
			        plotLines: [{
			            value: 0,
			            width: 1,
			            color: '#808080'
			        }]
			    },
			    tooltip: {
			        valueSuffix: '°C'
			    },
			    legend: {
			        layout: 'vertical',
			        align: 'right',
			        verticalAlign: 'middle',
			        borderWidth: 0
			    },
			    series: [{
			        name: '东京',
			        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
			    }, {
			        name: '纽约',
			        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
			    }, {
			        name: '柏林',
			        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
			    }, {
			        name: '伦敦',
			        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
			    }]
			});
		}
	</script>
</body>
</html>